// 1. 将正则提炼到了common.js中 validatData(username,password)

// 2. 封装一个与服务器通讯的方法 login
async function login(requestBody) {
    try {
        let res1 = await axios({
            url: '/login',
            method: 'post',
            data: requestBody
        })

        let { username, token } = res1.data  // 解构属性（等于只提炼出这两个属性，可以直接用）

        // 1. 保存服务器响应回来的数据
        // 用户名保存（看接口文档）
        // 服务器响应回来的token保存到本地存储
        localStorage.setItem('username', username) // 用于显示右上角的用户名
        localStorage.setItem('token', token) // 只有登录时才下发token，后面的增删查改需要用，需存到本地

        // 2. 跳转到首页
        pxmu.toast('登陆成功')
        setTimeout(() => {
            location.href = 'index.html'
        }, 1000)


    } catch (err) {
        // 异常处理
        pxmu.fail(err.response.data.message || '登录失败，请检查网络请求')

    }
}

// 3. 给登录按钮注册点击事件
document.querySelector('#btn-login').addEventListener('click', function (e) {
    e.preventDefault()

    // 获取form表单中的元素值
    const forBox = document.querySelector('.login-form')  // 获取form表单
    let body = serialize(forBox, { hash: true, empty: true })  //插件收集表单数据
    let { username, passsword } = body  // 解构属性（等于只提炼出这两个属性，可以直接用）

    // 调用common.js中的validatData正则表达式验证表单元素的合法性
    if (!validatData(username, passsword)) {
        pxmu.fail('【用户名】或者【密码】不符合规范')
        return
    }

    // 调用login方法完成登录
    login(body)
})